// http请求
var httpRequest = {
    review_data:{},
    requestUrl:[
    {
        id:"user-active",
        url:"data/au.json"
    }
    ],
    // 请求选项匹配
    filterUrl:function(option){
        switch (option){
            case "user-active":
            var url = this.checkUrl(option);
            this.requestData(option,url);
            break;
            default:
            break;
        }
    },
    // 检索请求地址
    checkUrl:function(option){
        for(i in this.requestUrl){
            var item = this.requestUrl[i];
            if(option == item.id){
                return item.url;
            }
        }
    },
    // 发起异步请求
    requestData:function(option,url){
        $.ajax({
            type: "GET",
            url:url,
            dataType: "json",
            success:function(data){
                review_data=data.data;
                // 数据处理匹配
                switch (option){
                    case "user-active":
                    activeUserData.updataCharts(option,review_data);
                    break;
                    default:
                    break;
                }
            }
        })
    }
}

// 列表数据填充
var importTable = {
    fillTable:function(option,data){
        switch (option){
            case "user-active":
            var $paging = $("#paging");
            this.activeTableFill(data);
            break;
            default:
            break;
        }
    },
    // 活跃用户数据表填充
    activeTableFill:function(data){
        var tbody = document.getElementById("active-data");
        for(var i in data){
            var item = data[i];
            var tr = document.createElement("tr");
            content = "<td>"+item.date+"</td>" + "<td>"+item.star+"</td>" + "<td>"+item.dau+"</td>" + "<td>"+item.wau+"</td>" + "<td>"+item.mau+"</td>" + "<td>"+item.slicen+"</td>" + "<td>"+item.startSum+"</td>";
            tr.innerHTML = content;
            tbody.appendChild(tr);
        }

        this.addTableStyle(tbody);
    },

    // 添加水平居中样式
    addTableStyle:function(tbody){
        var td = tbody.getElementsByTagName("td");
        for(i in td){
            td[i].className = "am-text-center";
        }
    }
}

var activeUserData = {
    // 输出横坐标--日期
    importDate:function(data){
        var dateArr = [];
        for(i in data){
            var item = data[i];
            dateArr.push(item.date);
        }
        return dateArr.reverse();
    },
    // 输出主数据  日活/月活
    activeUser:function(data){
        var dataArr = [];
        for(i in data){
            var item = data[i];
            dataArr.push(parseFloat(item.dau));
        }
        return dataArr.reverse();
    },
    updataCharts:function(option,data){
        var echartsA = echarts.init(document.getElementById("tpl-echarts"));

        var activeOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['留存用户']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data:this.importDate(data)
            }],
            yAxis: [{
                type: 'value'
            }],
            textStyle: {
                color: '#838FA1'
            },
            series: [{
                name: '区域分布',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: this.activeUser(data),
                itemStyle: {
                    normal: {
                        color: '#1cabdb',
                        borderColor: '#1cabdb',
                        borderWidth: '2',
                        borderType: 'solid',
                        opacity: '0.8'
                    },
                    emphasis: {}
                }
            }]
        };

        echartsA.setOption(activeOption);

        // 列表数据展示
        importTable.fillTable(option,data);
    }
}
        
// 固定筛选框浮窗
// 初始状态下为固定状态
// 点击按钮后根据当前状态判断是否为浮动状态，取非
// 是用title进行定位

// var panelFixed = {
//     isFixed:false,  //初始状态下为固定状态
//     init:function(){
//         var selectPanel = document.getElementById("select-panel");
//         var pageTitle = document.getElementById("page-title");
//         var fixedIcon = document.getElementById("fixed-icon");

//         this.judgeStatus(selectPanel,pageTitle,fixedIcon);  //滚动条滑动监听
//         fixedIcon.onclick = this.changeStauts;
//     },
//     judgeStatus:function(panel,title,icon){
//         panelFixed.isFixed ? panelFixed.scrollMonitor(panel,title,icon) : panelFixed.unFixed(panel,icon);
//     },
//     scrollMonitor:function(panel,title,icon){
//         icon.className = "am-icon-anchor am-icon-fw fixed-icon";
//         $(window.document).scroll(function(){
//          if(title.getBoundingClientRect().top <= -80){
//             panel.className = "am-panel am-panel-primary fixed";
//         }else{
//             panel.className = "am-panel am-panel-primary";
//         }
//     });
//     },
//     unFixed:function(panel,icon){
//         $(window.document).unbind("scroll");  //取消监听
//         icon.className = "am-icon-anchor am-icon-fw";
//         panel.className = "am-panel am-panel-primary";
//         // console.log("icon");
//     },
//     changeStauts:function(){
//         panelFixed.isFixed = !panelFixed.isFixed;
//         panelFixed.init();
//         console.log(panelFixed.isFixed);
//     }
// }
// 

// 筛选框样式更改
$("#channel").find("li").on("click",function(){
    $("#channel").find("li").removeClass("select-active");
    $(this).addClass("select-active");
})

$("#indicator").find("li").on("click",function(){
    $("#indicator").find("li").removeClass("select-active");
    $(this).addClass("select-active");
})

$("#time").find("li").on("click",function(){
    $("#time").find("li").removeClass("select-active");
    $(this).addClass("select-active");
})